<template>
	<view class="box" v-if="detailData">
		<view class="order cardBorder">
			<!-- <view class="order-title">
				我的订单
			</view> -->
			<van-steps v-model:steps="steps" v-model:active="active" />
		</view>
		<view class="detail cardBorder">
			<view class="detail-title">
				订单详情
			</view>
			<view class="detail-main">
				<view class="detail-main-col">
					<view class="detail-main-col-label">规格*米数：</view>
					<text>{{detailData.specification}}</text>
				</view>
				<view class="detail-main-col">
					<view class="detail-main-col-label">产品名称：</view>
					<text>{{detailData.productName}}</text>
				</view>
			</view>
			<view class="detail-main">
				<view class="detail-main-col">
					<view class="detail-main-col-label">订单编号：</view>
					<text>{{detailData.orderNo}}</text>
				</view>
				<view class="detail-main-col">
					<view class="detail-main-col-label">总吨数：</view>
					<text>{{detailData.totalTon}}</text>
				</view>
			</view>
			<view class="detail-main">
				<view class="detail-main-col">
					<view class="detail-main-col-label">托盘费用：</view>
					<text v-if="detailData.status>2">{{detailData.trayAmount.toFixed(2)}}</text>
					<text v-else>{{(detailData.totalTon*detailData.trayUnitPrice).toFixed(2)}}</text>
				</view>
				<view class="detail-main-col amount">
					<view class="detail-main-col-label">总金额：</view>
					<text v-if="!form.isUseTray">{{detailData.stockAmount.toFixed(2)}}</text>
					<text v-else>{{ (detailData.stockAmount+detailData.totalTon*detailData.trayUnitPrice).toFixed(2) }}</text>
				</view>
			</view>
			<view class="detail-main">
				<view class="detail-main-col">
					<view class="detail-main-col-label">创建时间：</view>
					<text>{{detailData.createTime}}</text>
				</view>
			</view>
			<view v-if="detailData.status<3">
				<view class="detail-main">
					<view class="detail-main-col">
						<view class="detail-main-col-label">是否使用托盘({{detailData.trayUnitPrice}}元/吨)：</view>
						<van-switch style="height: 25px;" size="25px" v-model:checked="form.isUseTray"
							@change="onChange" />
					</view>
				</view>
				<view class="detail-main" v-if="form.isUseTray">
					<view class="detail-main-col">
						<view class="detail-main-col-label">收货人：</view>
						<input class="uni-input" v-model="form.receiveUser" focus placeholder="请输入收货人姓名(必填)" />
					</view>
				</view>
				<view class="detail-main" v-if="!form.isUseTray">
					<view class="detail-main-col">
						<view class="detail-main-col-label">托盘号码：</view>
						<input class="uni-input" type="number" maxlength="11" v-model="form.receivePhone"
							placeholder="请输入托盘号码(必填)" />
					</view>
				</view>
				<view class="detail-main" v-if="form.isUseTray">
					<view class="detail-main-col">
						<view class="detail-main-col-label">收货地址：</view>
						<input class="uni-input" v-model="form.receiveAddress" placeholder="请输入收货地址(必填)" />
					</view>
				</view>
				<view class="detail-main">
					<view class="detail-main-col">
						<view class="detail-main-col-label">备注：</view>
						<input class="uni-input" v-model="form.remark" placeholder="请输入备注内容(非必填)" />
					</view>
				</view>
			</view>
			<view v-else>
				<view class="detail-main" v-if="detailData.isUseTray">
					<view class="detail-main-col">
						<view class="detail-main-col-label">是否使用托盘：</view>
						<text>{{detailData.isUseTray?'是':'否'}}</text>
					</view>
				</view>
				<view class="detail-main" v-if="detailData.isUseTray">
					<view class="detail-main-col">
						<view class="detail-main-col-label">收货人：</view>
						<text>{{detailData.receiveUser?detailData.receiveUser:'-'}}</text>
					</view>
					<view class="detail-main-col">
						<view class="detail-main-col-label">收货电话：</view>
						<text>{{detailData.receivePhone?detailData.receivePhone:'-'}}</text>
					</view>
				</view>
				<view class="detail-main" v-if="detailData.isUseTray">
					<view class="detail-main-col">
						<view class="detail-main-col-label">收货地址：</view>
						<text>{{detailData.receiveAddress?detailData.receiveAddress:'-'}}</text>
					</view>
				</view>
				<view class="detail-main">
					<view class="detail-main-col">
						<view class="detail-main-col-label">备注：</view>
						<text>{{detailData.remark?detailData.remark:'-'}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="table cardBorder">
			<scroll-view scroll-x enable-flex style="width: 100%;box-sizing: border-box;" lower-threshold="50">
				<view class="head">
					<view class="head-col" :style="headStyle(item)" v-for="(item,index) in headColumns" :key="index">
						<text>
							{{item.name}}
						</text>
					</view>
				</view>
				<view v-if="detailData.stocks.length>0" class="main">
					<view class="main-row" v-for="(j,jIndex) in detailData.stocks" :key="jIndex">
						<view class="main-row-col" :style="headStyle(item,index)" v-for="(item,index) in headColumns"
							:key="index">
							<text>
								{{j[item.props]!==null||j[item.props]!=''?j[item.props]:'-'}}
							</text>
						</view>
					</view>
				</view>
				<view v-else-if="detailData.stocks.length==0" class="empty">
					<van-empty description="暂无数据" />
				</view>
			</scroll-view>
		</view>
		<view class="bot" v-if="detailData.status<3">
			<view class="botBtn">
				<view class="botBtn-confirm" @click="submit">
					提交订单
				</view>
				<view class="botBtn-cancel" @click="cancel">
					取消订单
				</view>
			</view>
		</view>
		<van-dialog id="van-dialog" use-slot title="订单支付" :show="show" show-cancel-button
      @confirm="onConfirm"
      @cancel="onCancel"
>
			<view class="diaMain">
				<view class="diaMain-amount">
					<text class="diaMain-amount-label">订单金额：</text>
					<text class="diaMain-amount-value">¥{{orderAmount}}</text>
				</view>
				<view class="qrd" >
					<view class="qrd-txt">
						扫描二维码添加官方客服完成支付
					</view>
					<view class="qrd-txt">
						（长按加微）
					</view>
					<view class="qrd-ma">
						<image class="maImg"  show-menu-by-longpress="true" :lazy-load="true" :lazy-load-margin="0" mode="widthFix" :src="setImgUrl(qrdImg)" alt=""  @click="previewImage"/>
					</view>
				</view>
			</view>
		</van-dialog>
	</view>
	<float-drag></float-drag>
</template>

<script>
	import {
		postOrderDetail,
		postOrderSubmit,
		putOrderCancel
	} from '@/common/api.js'
	import Dialog from '@/wxcomponents/vant/dialog/dialog'
	import toolMarket from './util.js'
	import FloatDrag from '../../components/float-drag.vue'
	export default {
		name: 'confirmOrder',
		components: {
			'float-drag': FloatDrag
		},
		data() {
			return {
				orderId: null,
				detailData: null,
				active:0,
				steps: [],
				headColumns: [],
				form: {
					isUseTray: false,
					receiveUser: '',
					receiveAddress: '',
					receivePhone: '',
					remark: '',
				},
				show: false,
				orderAmount:0,//订单金额
				trayAmount:0,//托盘费用
				qrdImg:'gjtkfqrcode.png'
			}
		},
		computed: {
			colWidthTotal() {
				let arr = this.headColumns.map(i => +i.minWidth)
				let sum = arr.reduce((accumulator, currentValue) => accumulator + currentValue, 0)
				return sum
			}
		},
		onLoad(option) {
			this.steps = toolMarket.steps
			this.headColumns = toolMarket.orderHeadColumns
			this.orderId = option.orderId
			console.log(this.orderId)
			this.getDetail(this.orderId)
		},
		onPullDownRefresh() {
			this.getDetail(this.orderId)
			setTimeout(() => {
				// 停止下拉刷新
				uni.stopPullDownRefresh();
			}, 500);
		},
		methods: {
			setImgUrl(val) {
				return `${getApp().globalData.utils.imgUrl}${val}`
			},
			onChange() {
				this.form.isUseTray = !this.form.isUseTray
			},
			headStyle(val, index) {
				let obj = {
					'min-width': `${val.minWidth}px`,
					'width': `${(val.minWidth*100)/this.colWidthTotal}%`,
					'text-align': `${val.align?val.align:'left'}`,
					'color': `${val.color?val.color:'#000'}`
				}
				return obj
			},
			async getDetail(id) {
				let params = {
					orderId: id
				}
				const res = await postOrderDetail(params)
				console.log(res)
				this.detailData = res.data
				this.form.isUseTray = res.data.isUseTray?res.data.isUseTray:false
				this.form.receiveUser = res.data.receiveUser?res.data.receiveUser:''
				this.form.receivePhone = res.data.receivePhone?res.data.receivePhone:''
				this.form.receiveAddress = res.data.receiveAddress?res.data.receiveAddress:''
				this.form.remark = res.data.remark?res.data.remark:''
				if(this.detailData.status){
				this.active = this.steps.findIndex(i=>i.id==this.detailData.status)
				}
			},
			onConfirm(event) {
				console.log(event.detail)
				console.log(2)
				this.show = false
				uni.navigateTo({
					url:`../market/mineOrder`
				})
			},
			onCancel() {
				console.log(1)
				this.show = false
			},
			previewImage(e) {
				uni.previewImage({
					// 需要预览的图片链接列表。若无需预览，可以注释urls
					urls: [this.setImgUrl(this.qrdImg)],
					// 为当前显示图片的链接/索引值
					current: 0,
					// 图片指示器样式	
					indicator: 'default',
					// 是否可循环预览
					loop: false,
					success: res => {
						console.log('previewImage res', res);
					},
					fail: err => {
						console.log('previewImage err', err);
					}
				});
			},
			// 提交订单
			async submit() {
				// return 	this.show=true
				if (this.form.isUseTray) {
					if (!this.form.receiveUser || !this.form.receiveAddress) {
						return uni.showToast({
							title: '请完善收货人地址信息',
							icon: 'none',
						})
					}
				} else {
					if (!this.form.receivePhone) {
						return uni.showToast({
							title: '请输入托盘号码',
							icon: 'none',
						})
					}
				}
				let params = {
					orderId: +this.orderId,
					isUseTray: this.form.isUseTray,
					receiveUser: this.form.receiveUser,
					receivePhone: this.form.receivePhone + '',
					receiveAddress: this.form.receiveAddress,
					remark: this.form.remark
				}
				const res = await postOrderSubmit(params)
				console.log(res)
				if (res.code === -1) {
					uni.showToast({
						title: '提交失败' + `:${res.message}`,
						icon: 'none',
					})
				} else {
					uni.showToast({
						title: '提交成功',
						icon: 'none',
					})
					this.orderAmount = res.data.orderAmount
					this.trayAmount = res.data.trayAmount
					this.show=true
				}
			},
			// 取消订单
			async cancel() {
				let params = {
					orderId: this.orderId
				}
				uni.showModal({
					title: '提示',
					content: '是否确认取消订单？',
					success: async (res) => {
						if (res.confirm) {
							// 用户点击了确认按钮，执行确认回调
							const res = await putOrderCancel(params)
							if (res.data) {
								uni.showToast({
									title: '订单取消成功',
									icon: 'none',
								})
								uni.switchTab({
									url:`../market/index`
								})
							} else {
								uni.showToast({
									title: '订单取消失败',
									icon: 'none',
								})
							}
						} else if (res.cancel) {
							console.log('用户点击了取消');
						}
					}
				});

			},

		}
	}
</script>

<style lang="scss" scoped>
	.box {
		width: 100%;
		height: 100vh;
		overflow-x: hidden;
		overflow-y: auto;
		background-color: #ececec;
		padding: 0px 10px 20px;
		box-sizing: border-box;

		.order {
			margin-top: 10px;
			box-sizing: border-box;
			padding: 15px 0px;
			:deep(.van-step__title){
				font-size: 13px;
			}

			&-title {
				margin-left: 15px;
			}
		}

		.detail {
			box-sizing: border-box;
			padding: 15px 10px;

			&-main {
				display: flex;
				align-content: center;
				font-size: 14px;

				&-col {
					flex: 1;
					display: flex;
					align-items: center;
					height: 40px;
					line-height: 40px;

					&-label {
						color: #969798;
						min-width: 80px;
						text-align: right;
					}

					.uni-input {
						flex: 1;
					}
				}

				.amount {
					background-color: yellow;
					font-size: 16px;
				}
			}
		}

		.table {
			box-sizing: border-box;
			padding: 0px;
		}

		.head {
			// width: 100%;
			// overflow-y: hidden;
			font-size: 15px;
			display: flex;
			align-content: center;
			flex-wrap: nowrap;
			// margin-top: 15px;
			border-radius: 4px;

			&-col {
				height: 35px;
				line-height: 35px;
				background-color: #fff;
			}
		}

		.main {
			font-size: 15px;
			// padding-top: 45px;

			&-row {
				display: flex;
				align-content: center;
				flex-wrap: nowrap;
				box-sizing: border-box;

				&-col {
					height: 45px;
					line-height: 45px;
					position: relative;
					box-sizing: border-box;
					border-top: 1px solid #ececec;

					.sec-props {
						font-size: 12px;
						position: absolute;
						left: 0;
						top: 0;
						bottom: 0;
					}
				}
			}
		}

		.empty {
			padding-top: 45px;
			box-sizing: border-box;
			height: calc(100vh - 145px);
			text-align: center;
			color: #a8a8a8;
			font-size: 15px;
		}

		.bot {
			width: 100%;
			height: 60px;
			position: fixed;
			margin: 0 auto;
			left: 0;
			right: 0;
			bottom: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #fff;
		}

		.botBtn {
			width: 90%;
			height: 45px;
			line-height: 45px;
			text-align: center;
			border-radius: 25px;
			color: #fff;
			display: flex;
			overflow: hidden;

			&-confirm {
				flex: 2;
				background-color: #0749e4;
			}

			&-cancel {
				flex: 1;
				background-color: #ececec;
				color: #969798;
			}
		}

		.cardBorder {
			box-sizing: border-box;
			border-radius: 20rpx;
			overflow: hidden;
			margin-top: 30rpx;
			background-color: #fff;
		}
		.diaMain{
			height: 90%;
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			&-amount{
				font-size: 15px;
				color: #969798;
				margin-top: 5px;
				&-value{
					font-size: 24px;
					font-weight: bolder;
					color: red;
				}
			}
			.qrd{
				font-size: 14px;
				color: #969798;
				margin-top: 15px;
				text-align: center;
				&-ma{
					width: 100%;
					text-align: center;
					box-sizing: border-box;
					padding-left: 15px;
					.maImg{
						width: 100%;
						min-width: 300px;
					}
				}
			}
		}
	}
</style>